<!DOCTYPE html>
<html lang="zh-CH">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盗版小米商城</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- 导航栏 -->
    <nav>
      <div class="w">
        <ul class="left_nav">
          <li><a href="">小米官网</a></li>
          <span>|</span>
          <li><a href="">小米商城</a></li>
          <span>|</span>

          <li><a href="">小米澎湃OS</a></li>
          <span>|</span>

          <li><a href="">小米汽车</a></li>
          <span>|</span>

          <li><a href="">云服务</a></li>
          <span>|</span>

          <li><a href="">loT</a></li>
          <span>|</span>

          <li><a href="">有品</a></li>
          <span>|</span>

          <li><a href="">小爱开放平台</a></li>
          <span>|</span>

          <li><a href="">资质证照</a></li>
          <span>|</span>

          <li><a href="">协议规则</a></li>
          <span>|</span>

          <li><a href="">下载app</a></li>
          <span>|</span>

          <li><a href="">select Location</a></li>
        </ul>
        <ul class="right_nav">
          <li><a href="">登录</a></li>
          <li><a href="">注册</a></li>
          <li><a href="">消息通知</a></li>
          <li class="shoping_car"><a href=""></a></li>
        </ul>
      </div>
    </nav>
    <div class="w" style="margin-bottom: 250px">
      <!-- logo和部分导航 -->
      <div class="logo">
        <img src="小米官网/images/logo.png" alt="" />
        <div class="shang_pin">
          <ul>
            <li><a href="">Xiaomi手机</a></li>
            <li><a href="">REDMI手机</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">笔记本</a></li>
            <li><a href="">平板</a></li>
            <li><a href="">家电</a></li>
            <li><a href="">路由器</a></li>
            <li><a href="">服务中心</a></li>
            <li><a href="">社区</a></li>
          </ul>
        </div>
      </div>
      <!-- 大广告和商品信息 -->
      <header>
        <div class="nav">
          <ul>
            <li><a href="">手机 平板 电话卡 </a></li>
            <li><a href="">电视 盒子</a></li>
            <li><a href="">路由器 智能硬件 </a></li>
            <li><a href="">移动电源 插线板 </a></li>
            <li><a href="">耳机 音箱 </a></li>
            <li><a href="">电池 存储卡 </a></li>
            <li><a href="">保护套 后盖 </a></li>
            <li><a href="">贴膜 其他配件 </a></li>
            <li><a href="">米兔 服装 </a></li>
            <li><a href="">箱包 其他周边 </a></li>
          </ul>
        </div>
        <div class="right"></div>
        <script>
          var listItems = document.querySelectorAll('.nav ul li');
          listItems.forEach(function (li) {
            var span = document.createElement('span');
            span.innerHTML = '>';
            span.className = 'big';
            li.appendChild(span);
          });
        </script>
      </header>
      <!-- 商品广告 -->
      <div class="pnoto">
        <div class="photo1"></div>
        <div class="photo2"></div>
        <div class="photo3"></div>
        <div class="photo4"></div>
      </div>
    </div>
    <!-- 灰色商品部分 -->
    <div class="bgc">
      <div class="w">
        <div class="shang_pin2">
          <div class="title">智能硬件</div>
          <div class="left_photo">
            <img src="../shoping-xiaomi/小米官网/images/girl.jpg" alt="" />
          </div>
          <div class="right_photo">
            <div class="shagn">
              <div>免运费</div>
              <img src="../shoping-xiaomi/小米官网/images/d1.jpg" alt="" />
              <h4>小米路由器3</h4>
              <span>四天线设计，更安全更稳定 </span>
              <p>149元</p>
            </div>
            <div class="shagn">
              <img src="../shoping-xiaomi/小米官网/images/d2.jpg" alt="" />
              <h4>米家 LED 智能台灯</h4>
              <span>无可视频闪，亮度色温无级调节</span>
              <p>169元</p>
            </div>
            <div class="shagn">
              <div>免运费</div>
              <img src="../shoping-xiaomi/小米官网/images/d3.jpg" alt="" />
              <h4>小米净水器 厨下式</h4>
              <span>RO反渗透直出纯净水，包邮包安装 </span>
              <p>1999元</p>
            </div>
            <div class="shagn" id="bottom">
              <img src="../shoping-xiaomi/小米官网/images/d4.jpg" alt="" />
              <h4>小蚁智能摄像机 夜视版</h4>
              <span> 能看能听能说，手机远程观看 </span>
              <p>149元</p>
            </div>
            <div class="shagn">
              <img src="../shoping-xiaomi/小米官网/images/d5.jpg" alt="" />
              <h4>Yeelight床头灯</h4>
              <span>触摸式操作，给卧室1600万种颜色</span>
              <p>249元</p>
            </div>
            <div class="shagn">
              <img src="../shoping-xiaomi/小米官网/images/d6.jpg" alt="" />
              <h4>小米空气净化器2</h4>
              <span>10分钟，房间空气焕然一新 </span>
              <p>699元</p>
            </div>
            <div class="shagn">
              <img src="../shoping-xiaomi/小米官网/images/d7.jpg" alt="" />
              <h4>小米智能安防套装</h4>
              <span>智能警戒，为您的家增添一份安心 </span>
              <p>169元</p>
            </div>
            <div class="shagn" style="margin-right: 0px">
              <img src="../shoping-xiaomi/小米官网/images/d8.jpg" alt="" />
              <h4>米家iHealth血压计</h4>
              <span> 爸妈上手就会用的智能血压计 </span>
              <p>399元</p>
            </div>
          </div>
          <script>
            var bottom = document.querySelector('.right_photo');
            for (var i = 0; i <= 3; i++) {
              bottom.children[i].setAttribute('style', 'margin-bottom:15px;');
            }
          </script>
        </div>
      </div>
    </div>
    <!-- 网页尾部 -->
    <div class="w">
      <div class="bigbox">
        <div class="box">
          <dl>
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
          </dl>
          <dl>
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
          </dl>
          <dl>
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>零售网点</dd>
          </dl>
          <dl>
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>联系我们</dd>
          </dl>
          <dl>
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>小米部落</dd>
            <dd>官方微信</dd>
          </dl>
          <dl>
            <dt>特色服务</dt>
            <dd>F 码通道</dd>
            <dd>小米移动</dd>
            <dd>防伪查询</dd>
          </dl>
        </div>
        <div class="tel">
          <h4>400-100-5678</h4>
          <p>周一至周日 8:00-18:00</p>
          <span>（仅收市话费）</span>
        </div>
      </div>
    </div>
    <!-- 尾巴 -->
    <div class="hui_se">
      <div class="w">
        <footer>
          <img src="../shoping-xiaomi/小米官网/images/logo.png" alt="" />

          <ul>
            <li><a href="">小米网</a></li>
            <span>|</span>
            <li><a href="">MIUI</a></li>
            <span>|</span>

            <li><a href="">米聊</a></li>
            <span>|</span>

            <li><a href="">多看书城</a></li>
            <span>|</span>

            <li><a href="">小米路由器</a></li>
            <span>|</span>

            <li><a href="">视频电话</a></li>
            <span>|</span>

            <li><a href="">小米后院</a></li>
            <span>|</span>

            <li><a href="">小米天猫店</a></li>
            <span>|</span>

            <li><a href="">小米淘宝直营店</a></li>
            <span>|</span>

            <li><a href="">小米网盟</a></li>
            <span>|</span>

            <li><a href="">问题反馈</a></li>
            <span>|</span>

            <li><a href="">Select Region</a></li>
          </ul>
          <p class="footer">
            ?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
            京网文[2014]0059-0009号
          </p>
          <p class="footer">
            违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </p>
        </footer>
        <div class="bottom">探索黑科技，小米为发烧而生</div>
      </div>
    </div>
  </body>
</html>
